<template>
    <div>
        <input type="text" v-model.number.lazy="x">
        +
        <input type="text" v-model.number.lazy="y">
        =
        <input type="text" v-model.number.lazy="z">
    </div>
</template>

<script setup>
/**
 * computed 函数
    * 作用：定义计算属性
    * 使用：
        * 1、定义制度类型的计算属性
            * let 结果 = computed(()=>{
                * return 计算结果
            * })
        * 2、定义可写类型的计算属性
        * let 结果 = computed({
            * get(){
            *
            * },
            * set(){
            *
            * }
        * })
 */

// 导入 ref、computed 函数
import { ref, computed } from 'vue'
let x = ref(100)
let y = ref(200)
// 只读
// let z = computed(() => {
//     return x.value + y.value
// })
// 可写
let z = computed({
    get() {
        return x.value + y.value
    },
    set(val) {
        console.log(val)
        // x.value = val / 2
        // y.value = val / 2
        x.value = y.value = val / 2
    }
})
</script>

<style lang="scss" scoped></style>